<extend name="template/base_top" />
<block name="area_header">
    <link rel="stylesheet" href="__CSS__/userinfo.css">

</block>
<block name="area_body">
    <style type="text/css">
        .zjq-case-btn {
            margin-left:25px;
        }
        .main-box {
            margin-top:15px;
            margin-bottom: 40px;
        }
        .order-li {
            position: relative;
            border-top:1px solid #DADADA;
            margin-bottom: 15px;
            background-color:white;
        }
        .order-top-box{
            padding-left:10px;
            padding-top:5px;
            padding-bottom: 5px;
            margin-left:10px;
            margin-right:10px;
            border-bottom: 1px solid #E3E3E3;
            color:#6E6F70;
            font-size: 14px;
        }
        .order-status {
            float:right;
            margin-right:10px;
            color:#707172;
        }
        .order-detail {
            width:100%;
        }
        .order-detail-a {
            display:block;
        }
        .order-detail-a::after {
            display: inline-block;
            font: normal normal normal 1.6rem/1 FontAwesome,sans-serif;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transform: translate(0,0);
            content: "\f054";
            position: absolute;
            right: 10px;
            color: #ccc;
            top: 50%;
            margin-top: -8px;
        }

        .order-info {
            display: inline-block;
        }
        .order-info h6,.order-info p {
            margin:0 !important;
        }
        .order-info-price {
            color:#E93E50;
        }
        .order-info-num {
            color:#91929A;
        }

        .order-c-img{
            margin:5px;
            margin-left:15px;
            display: inline-block;
            width:34%;
        }
        .order-c-img img {
            width:100%;
            padding:2px;
            border:1px solid #DADADA;
        }
        .order-bottom-box {
            color:#49504F;
            font-weight: 500;
            border-top:1px solid #EDEDED;
            padding:10px;
        }
    </style>
    <div class="my-nav-bar">
        <ol class="am-breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">订单</a></li>

            <if condition="$status eq 1">
                <li><a href="#">待付款</a></li>
            </if>

            <if condition="$status eq 2">
                <li><a href="#">待发货</a></li>
            </if>

            <if condition="$status eq 3">
                <li><a href="#">待收货</a></li>
            </if>
        </ol>
    </div>
    <div class="main-box">
        <empty name="list"><center><img src="__IMG__/no.png" width="40px"><br/><span style="font-size:12px;">你没有相关信息</span></center></empty>
        <volist name="list" id="vo">
            <if condition="$vo.order_status lt 8">

                <div class="order-li">
                    <div class="order-top-box am-text-lg">
                        订单号：{$vo.order_code}
                        <span class="order-status">

                            <if condition="$vo.pay_status eq 0">
                                待付款
                            </if>

                            <if condition="$vo.order_status eq 3">
                                待发货
                            </if>

                            <if condition="$vo.order_status eq 4">
                                待收货
                            </if>

                             <if condition="$vo.order_status eq 5">
                                收货成功
                            </if>

                        </span>
                    </div>
                    <a href="{:U('Order/detail2',array('id'=>$vo['id']))}" class="order-detail-a">
                        <volist name="vo['_items']" id="do">
                            <div class="order-detail">
                                <div class="order-c-img">
                                    <img src="{$do['img_url']}">
                                </div>
                                <div class="order-info">
                                    <h6>{$do['name']}</h6>
                                    <p><span class="order-info-price">￥{$do['price']}</span><span class="order-info-num">共{$do['count']}件商品</span></p>
                                </div>
                            </div>
                        </volist>
                    </a>
                    <hr data-am-widget="divider" style="margin-left:10px;margin-right:10px;" class="am-divider am-divider-dashed" />
                    <div class="allprice-box am-text-right">
                        <span>共计{$vo['count']}件商品，合计{$vo.price}元（包邮）</span>
                    </div>
                    <div class="order-bottom-box am-cf am-text-right">
                        <if condition="$vo.pay_status eq 0">
                            <a href="{:U('TestPay/jsapi',array('order_code'=>$vo['order_code']))}" class="am-btn am-btn-warning am-btn-sm">去支付</a>
                            <button type="button" class="am-btn am-btn-danger am-btn-sm cancel-btn" data-href="{:U('Order/cancel',array('order_code'=>$vo['order_code']))}">取消订单</button>
                        </if>

                        <if condition="($vo.order_status eq 2)and($vo.pay_status eq 1)">
                            <a class="am-badge am-badge-secondary">待确认</a>
                        </if>
                        <if condition="$vo.order_status eq 3">
                            <if condition="($vo.cs_status eq 2)or($vo.cs_status eq 3)">
                                <a href="{:U('Order/detail2',array('id'=>$vo['id']))}" class="am-btn am-btn-secondary am-btn-sm">查看售后</a>
                                <else />
                                <a href="{:U('Order/afterSale',array('order_code'=>$vo['order_code']))}" class="am-btn am-btn-warning am-btn-sm">申请售后</a>
                            </if>
                        </if>

                        <if condition="$vo.order_status eq 4">
                            <volist name="express" id="co">

                                <if condition="$vo['order_code'] eq $co['order_code']">

                                    <a href="http://m.kuaidi100.com/index_all.html?type={$co['expresscode']}&postid={$co['expressno']}" class="am-btn am-btn-warning am-btn-sm">查看物流</a>
                                    <button type="button" data-href="{:U('Order/confirm_receipt',array('order_code' => $co['order_code']))}" class="confirm-receipt am-btn am-btn-danger am-btn-sm">确认收货</button>
                                </if>

                            </volist>
                        </if>

                        <if condition="$vo.order_status eq 5 ">
                            <if condition="($vo.cs_status eq 2)or($vo.cs_status eq 3)">
                                <a href="{:U('Order/detail2',array('id'=>$vo['id']))}" class="am-btn am-btn-secondary am-btn-sm">查看售后</a>
                                <else />
                                <a href="{:U('Order/afterSale',array('order_code'=>$vo['order_code']))}" class="am-btn am-btn-warning am-btn-sm">申请售后</a>
                            </if>
                        </if>

                    </div>
                </div>
            </if>
        </volist>
    </div>
    <script type="text/javascript">

        $(function() {
            $(".confirm-receipt").bind("click", function () {
                var url = $(this).attr('data-href');

                $('#my-confirm').modal({
                    relatedTarget: this,
                    onConfirm: function (options) {
                        $.get(url, function (msg) {
                            if (msg) {
                                $('#my-alert').modal();
                                $('#tip-content').text('确认收货成功');
                            } else {
                                $('#my-alert').modal();
                                $('#tip-content').text('确认收货失败');
                            }
                        });
                    },

                });

            });

            $(".cancel-btn").bind("click", function () {
                var url = $(this).attr('data-href');
                $('#my-confirm .am-modal-bd').text('您确认要取消订单？');
                $('#my-confirm').modal({
                    relatedTarget: this,
                    onConfirm: function (options) {
                        $.get(url, function (msg) {
                            if (msg) {
                                $('#my-alert').modal();
                                $('#tip-content').text('订单取消成功');
                            } else {
                                $('#my-alert').modal();
                                $('#tip-content').text('订单取消失败');
                            }
                        });
                    },

                });

            });

        })
    </script>
    <!--模态弹窗-->
    <div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm" style="display: none;">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">系统提醒</div>
            <div class="am-modal-bd">
                您确定收货吗？
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>确定</span>
            </div>
        </div>
    </div>

    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">系统提醒</div>
            <div class="am-modal-bd" id="tip-content">
                Hello world！
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" onclick="window.location.reload();">确定</span>
            </div>
        </div>
    </div>

</block>